<script setup>
import {ref, reactive, computed} from "vue";

const props = defineProps({
    name:String,
    value:String,
    unit:String,
    minrange:Number,
    maxrange:Number,
    normalvaluestring:String,
    iserror:Number,
    type:Number
})

const isAbnormal = computed({
  // 定义计算属性的 getter 函数
  get: function () {
    if(props.value=='+'){return true;}
    return (props.value < props.min || props.value > props.max);
  }
});

</script>
<template>
  <div class="itemContainer">
    <div class="abnormal" v-if="props.iserror === 1">异</div>
    <div>{{props.name}}</div>
    <el-input
        v-model="props.value"
        style="width: auto;padding: 10px"
    ></el-input>
    <div>{{props.unit}}</div>
    <div>正常值范围：{{props.minrange}}-{{props.maxrange}}</div>
  </div>
</template>

<style scoped>

.abnormal{
  width: 20px;
  height: 20px;
  text-align: center;
  background-color: #B5654E;
  color: #FFFFFF;
  border-radius: 25%;
  margin: 5px;
}

.itemContainer{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.itemContainer>*{
}



</style>